<template>
  <div id="app">
    <div class="movies">
      <Music v-for="item of musics" :key="item.name" :data="item"/>
    </div>
  </div>
</template>

<script>
import Music from './components/Music.vue'
import wyy from './models/wyy'

export default {
  name: 'App',
  data() {
    return {
      musics: [],
      num:1000000000
    }
  },
  components: {
    Music
  },
  async mounted() {
    const res = await wyy.huayu()
    this.musics = res.data.playlists
    console.log(this.musics);
  },
}
</script>

<style>
.movies{
  width: max-content;
  margin: 0 auto ;
  display: grid;
  grid-template-columns:repeat(4,1fr);
  grid-gap: 20px;
}
</style>
